<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/public.css" media="all">
	</head>
	<body>
		<form class="layui-form" action="" lay-filter="form-data">
			<div class="layui-form-item">
				<label class="layui-form-label">src</label>
				<div class="layui-input-block">
					<input type="text" name="src" required lay-verify="required" placeholder="请输入图片地址" autocomplete="off" class="layui-input">
				</div>
			</div>
			<!-- 图片上传测试 -->
			<div class="layui-form-item">
			        <label class="layui-form-label required">路径</label>
			        <div class="layui-input-block">
						<button type="button" class="layui-btn" id="test1">
						  <i class="layui-icon">&#xe67c;</i>上传图片
						</button>
			        </div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">background</label>
				<div class="layui-input-inline">
					<input type="text" name="background" required lay-verify="required" placeholder="请输入背景色" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">(rgb)</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">type</label>
				<div class="layui-input-block">
					<select name="type" lay-verify="required">
						<option value=""></option>
						<option value="0">轮播图</option>
						<option value="1">秒杀</option>
						<option value="2">团购</option>
						<option value="3">分类</option>
						<option value="4">猜你喜欢</option>
						<option value="5">其他</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">targetUrl</label>
				<div class="layui-input-block">
					<input type="text" name="url" placeholder="请输入目标url" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<script src="../lib/layui-v2.5.5/layui.js?v=1.0.4" charset="utf-8"></script>
		<script src="../js/lay-config.js" charset="utf-8"></script>
		<script>
			//Demo
			layui.use(['form', 'http', 'upload'], function() {
				var form = layui.form;
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					layuimini = layui.layuimini,
					upload = layui.upload;
					
					var http = layui.http;
					
					console.log(http)
					
				/**
				 * 测试文件上传
				 */
				var uploadInst = upload.render({
					elem: '#test1' //绑定元素
					,url: 'http://localhost:7777/img/uploadImg' //上传接口
					,method: 'post'
					,done: function(res){
						// 查看地址是：http://47.114.97.182/
					  console.log(res)
					  
					  //赋值到表单input
					  form.val("form-data", { //form-data 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
					    "src": res.data
					  });
					}
					,error: function(){
					  //请求异常回调
					}
				  });
					
				

				//监听提交
				form.on('submit(formDemo)', function(data) {
					var index = layer.alert('是否提交?', {
						title: '提交',
						btn: ['是', '否']
					}, function() {
						$.ajax( http.base_url + '/img/add',{
							data: data.field,
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							ContentType: 'application/json; charset=utf-8',
							timeout:10000,//超时时间设置为10秒；
							success:function(data){
								var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
								parent.layer.close(index); 
								
								 //添加成功后刷新父界面
								 window.parent.location.reload();
								
							},
							error:function(xhr,type,errorThrown){
								layer.alert('添加失败', {icon: 5});
							}
						});
					})
					return false;
				});
			});
		</script>
	</body>
</html>
